<template>
  <div class="container">
    <span class="send_list">外购明细表</span>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="mini"
    >
      <div class="flex_box">
        <div class="flex_1">
          <el-form-item>
            <span class="select_txt">选择查询条件:</span>
          </el-form-item>
          <el-form-item label="合同号">
            <el-input v-model="formInline.contract"></el-input>
          </el-form-item>
          <div class="test">
            <el-form-item label="项目名称">
              <el-select v-model="formInline.pro_name">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="导入日期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                v-model="formInline.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker
                v-model="formInline.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-col>
          </el-form-item>
          <div class="user_width">
            <el-form-item label="下发人">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </div>
          <!-- <el-form-item label="发运明细号">
            <el-input v-model="formInline.send_detail"></el-input>
          </el-form-item> -->
        </div>
        <div class="flex_2">
          <el-form-item label="外购明细号">
            <el-input v-model="formInline.send_detail"></el-input>
          </el-form-item>
          <div class="test">
            <el-form-item label="类别">
              <el-select v-model="formInline.review_status">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分配状态">
              <el-select v-model="formInline.review_status" placeholder="全部">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查找</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">审核通过</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">设发运明细号</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">打印明细表</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit"
              >按合同号打印全部</el-button
            >
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">{{ scope.row.serial_num }}</template>
      </el-table-column>
      <el-table-column prop="num" label="编号" width="60" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="detail_num"
        label="类别"
        width="60"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="pro_contract"
        label="明细号"
        width="72"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="pro_name"
        width="72"
        label="项目合同"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="part_name"
        width="72"
        label="项目名称"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="date_issue"
        width="72"
        label="部件名"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="date_change"
        label="下发日期修改日期"
        show-overflow-tooltip
        width="72"
      >
      </el-table-column>
      <el-table-column
        prop="under_signed"
        width="60"
        label="下发人"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="review_revice"
        label="审核"
        width="68"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column type="selection" width="44"> </el-table-column>
      <el-table-column
        prop="ship_no"
        width="60"
        label="外购号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="purchase_no"
        width="60"
        label="发运号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="equipment_purchase"
        label="设发运号"
        width="72"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="modify_view"
        width="72"
        label="分配"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="product_mix"
        width="78"
        label="编辑/删除"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="trans_price_list"
        label="采购"
        width="72"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="put_into_product"
        width="60"
        label="发运"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      centerDialogVisible1: false,
      formInline: {
        user: "",
        pro_name: "",
        date1: "",
        date2: "",
        contract: "",
        send_detail: "",
        review_detail: "",
      },
      tableData: [
        {
          serial_num: "",
          num: "",
          detail_num: "",
          pro_contract: "",
          pro_name: "",
          part_name: "",
          date_issue: "",
          date_change: "",
          under_signed: "",
          review_revice: "",
          ship_no: "",
          purchase_no: "",
          equipment_purchase: "",
          modify_view: "",
          product_mix: "",
          trans_price_list: "",
          put_into_product: "",
          outsourcing: "",
        },

      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}
.select_txt {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  font-weight: 700;
  line-height: 25px;
  margin-left: 44px;
}
.send_list {
  font-size: 18px;
  color: #000;
  line-height: 40px;
  padding: 0 12px 0 0;
  font-weight: 700;
  line-height: 36px;
  margin-left: 36px;
  margin-top: 10px;
}
/deep/ .el-select {
  width: 96px;
}
/deep/ .el-input--mini .el-input__inner {
  width: 136px;
}
/deep/.test .el-input__inner {
  width: 96px;
}
.flex_box {
  display: flex;
  flex-direction: column;
}
.flex_1 {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-left: -10px;
}
.flex_2 {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-left: 34px;
}
.user_width {
  margin-left: 10px;
}
/deep/ .el-col-2 {
  position: relative;
  top: 0;
  right: -14px;
}
/deep/.el-dialog {
  display: grid;
  justify-content: center;
}
/deep/.el-table--fit {
  display: grid;
  justify-content: center;
}
.eldia_send {
  font-weight: 600;
  font-size: 16px;
  margin-right: 20px;
  line-height: 28px;
}
.eldia_content {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.eldia_content2 {
  display: flex;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 18px;
}
.pro_txt {
  margin-right: 30px;
}
.contract_id {
  margin-left: 6px;
  border: 1px solid #dcdfe6;
  padding: 3px 8px;
  margin-right: 10px;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
/deep/.el-table th.el-table__cell.is-leaf {
  text-align: center;
}
.elf_2 {
  display: flex;
  justify-content: center;
  font-size: 15px;
  align-items: center;
  margin-bottom: 18px;
}
.txt_margin {
  margin-left: 12px;
  margin-right: 15px;
}
.txt_red {
  display: inline-block;
  color: red;
  margin: 0 5px 0 4px;
  font-weight: 600;
}
.txt_blue {
  display: inline-block;
  color: blue;
  margin: 0 5px 0 4px;
  font-weight: 600;
}
.txt_weight {
  font-weight: 600;
  color: #000;
}
</style>
